<div id="vue-basic-index"></div>
<script>
    Dcat.ready(function () {
        const { ref, onMounted, watch, unref } = Vue;
        window.appInit("#vue-basic-index", {
            template: `
                <n-spin size="large" :show="spinShow">
                    <n-space vertical>
                        <n-p style="margin:15px auto;">
                            <n-space justify="center" align="center">
                                <n-radio-group v-model:value="type">
                                    <n-radio-button v-for="date in dates" :key="date.value" :value="date.value" :label="date.label"></n-radio-button>
                                </n-radio-group>
                                <n-date-picker v-if="type==='custom'" v-model:value="range" type="daterange" clearable></n-date-picker>
                            </n-space>
                        </n-p>
                        <div class="p-1">
                            <n-descriptions label-align="center" label-placement="top" bordered :column="6">
                                <template v-for="item in items">
                                    <n-descriptions-item :label="item.label"><h4 class="text-center" ><span class="label bg-primary" v-text="item.value"></span></h4></n-descriptions-item>
                                </template>
                            </n-descriptions>
                        </div>
                        <div class="p-1">
                            <n-table :bordered="false" :single-line="false">
                                <n-thead>
                                    <n-tr><n-th colspan="2" style="text-align: center">商品交易排行</n-th><n-th colspan="2" style="text-align: center">门店交易排行</n-th></n-tr>
                                    <n-tr><n-th style="text-align: center;width: 30%">商品名称</n-th><n-th style="text-align: center">交易额</n-th><n-th style="text-align: center">门店名称</n-th><n-th style="text-align: center">交易额</n-th></n-tr>
                                </n-thead>
                                <n-tbody>
                                    <template v-for="rank in ranks">
                                        <n-tr style="text-align: center">
                                          <n-td>@{{rank.good_name||""}}</n-td><n-td style="font-size: 20px;color: red">@{{rank.good_num||""}}</n-td>
                                          <n-td>@{{rank.shop_name||""}}</n-td><n-td style="font-size: 20px;color: red">@{{rank.shop_num||""}}</n-td>
                                        </n-tr>
                                    </template>
                                </n-tbody>
                            </n-table>
                        </div>
                        <div id="echarts" style="width: 85vw; height:400px; padding: 10px"></div>
                    </n-space>
                </n-spin>
`,
            setup() {
                const dates = ref([
                    { label:"总的",value:"all"},
                    { label:"昨天",value:"yesterday"},
                    { label:"今天",value:"today"},
                    { label:"本周",value:"week"},
                    { label:"本月",value:"month"},
                    { label:"本季度",value:"quarter"},
                    { label:"本年",value:"year"},
                    { label:"自定义区间",value:"custom"},
                ])
                const options = ref({
                    title:{
                        text: '交易量图表统计'
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ["商城交易量","洗车服务交易量","会员卡交易量"]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: @json($dates)
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: @json($series)
                })
                const type = ref("all")
                const items = ref([]);
                const ranks = ref([]);
                const spinShow = ref(false);
                const range = ref(null);
                const getBasicTime = ()=>{
                    spinShow.value = true;
                    $.ajax({
                        url:"/admin/basic/range",
                        method:"POST",
                        data: { range:range.value, type: type.value },
                        success:(res)=>{
                            items.value = res.data.items;
                            ranks.value = res.data.ranks;
                            spinShow.value = false;
                        },
                        error:(error)=>{
                            spinShow.value = false;
                        }
                    })
                }
                onMounted(()=> {
                    getBasicTime()
                    let myChart = window.echarts.init(document.getElementById("echarts"));
                    myChart.setOption(unref(options))
                    window.onresize = function (){
                        myChart && myChart.resize();
                    }
                })
                watch(()=>range.value,()=>getBasicTime())
                watch(()=>type.value,()=>getBasicTime())
                return {
                    dates,
                    items,
                    ranks,
                    spinShow,
                    range,
                    type
                }
            }
        })
    })
</script>

